<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<!-- <%
	pageContext.setAttribute("PATH", request.getContextPath());
%> -->
<script type="text/javascript"
	src="static/js/jquery-1.12.4.min.js">
	
</script>
<LINK
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js">
	
</script>

</head>
<body>
	<!-- 更新用户 -->
	<div class="modal fade" id="userUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title"></h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
					   <div class="form-group" style="display:none">
							<label class="col-sm-2 control-label">编号:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="user_codes" 
								id="user_codes" placeholder="用户编号" >
									 <span id="helpBlock2" class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">姓名：</label>
							<div class="col-sm-10">
								<!-- <p class="form-control-static" id="empName_update_static"></p> -->
								<input type="text" class="form-control" name="user_names" 
								id="user_names" placeholder="用户姓名">
									 <span id="helpBlock2" class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">年龄:</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" name="user_ages"
									id="user_ages" placeholder="请输入你的年龄"> 
							</div>
						</div>
						<div class="form-group">
							<label for="inputuser_email3" class="col-sm-2 control-label">邮箱:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="user_emails" 
								id="user_emails" placeholder="user_email@qq.com">
									 <span id="helpBlock2" class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">性别：</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									name="user_genders" id="gender1_update" value="男" checked="checked">
									男
								</label> <label class="radio-inline"> <input type="radio"
									name="user_genders" id="gender2_update" value="女"> 女
								</label>
							</div>
						</div>
						<div class="form-group" style="display:none">
							<label class="col-sm-2 control-label">用户操作类型</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="type"
									id="type" value="add"> 
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">地址:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="user_addresss" 
								id="user_addresss" placeholder="用户住址">
									 <span id="helpBlock2" class="help-block"></span>
							</div>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="user_update_btn" onclick="fn_updata_user()">更新</button>
				</div>
			</div>
		</div>
	</div>
	<!-- end -->

	<!-- 添加用户 -->
	<div class="modal fade" id="userAddModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">用户添加</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" >
						<div class="form-group">
							<label class="col-sm-2 control-label">编号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="user_code"
									id="user_code" placeholder="user_code"> <span
									id="helpBlock2" class="help-block"></span>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">姓名</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" name="user_name"
									id="user_name"> 
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">年龄</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" name="user_age"
									id="user_age" placeholder="请输入你的年龄"> 
							</div>
						</div>
						<div class="form-group">
							<label for="inputuser_email3" class="col-sm-2 control-label">邮箱:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="user_email"
									id="user_email" placeholder="email@qq.com"> <span
									id="helpBlock2" class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">性别:</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									name="add_gender" id="gender1_add" value="男" checked="checked">
									男
								</label> <label class="radio-inline"> <input type="radio"
									name="add_gender" id="gender2_add" value="女"> 女
								</label>
							</div>
						</div>
						
						
						<div class="form-group" style="display:none">
							<label class="col-sm-2 control-label">用户操作类型</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="type"
									id="type" value="add"> 
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">地址:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="user_address"
									id="user_address"> 
							</div>
						</div>
						
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" onclick="fn_user_cancel()">取消</button>
					<button type="button" class="btn btn-primary" id="user_save_btn" onclick="fn_user_add()">保存</button>
				</div>
			</div>
			
		</div>
	</div>
    <!-- end -->


	<!-- 搭建显示页面 -->
	<div class="container" >
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h2>用户详细信息</h2>
			</div>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button type="button" class="btn btn-primary btn-sm"
					id="user_add_modal_btn" onclick="fn_add_user()">新增用户</button>
				<button type="button" class="btn btn-danger btn-sm"
					id="user_del_modal_btn" onclick="fn_del_user()">批量删除</button>
			</div>
		</div>

		<!-- 显示表格数据 -->
		<div class="row">
			<div class=col-md-12 >
				<table class="table table-hover" id="user_tables">
					<thead>
						<tr>
							<th><input type="checkbox" id="check_allUser"/>编号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>邮箱</th>
							<th>地址</th>
							<th>头像</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody >
					 
					</tbody>

				</table>
			</div>
		</div>


       <!-- 分页 -->
       <nav aria-label="Page navigation" style="text-align: center" id="page">
		  <ul class="pagination">
		 
		  </ul>
	 </nav>

	</div>
	
<script type="text/javascript">


var flag = 0; //全局变量用来判断是否选中复选框，默认没有选中
//定义一个全局变量，用来记录批量操作的用户id
var delId="";//要删除的用户id数组
var delIds = "";
var size = 0;  
var totalCount = 0;
var currentPage = 1;  // 默认当前页面为1
var startPage=0;
var endPage = 0;

/* 加载所有的用户信息 */
$(function(){
    getAllUser();
});


function fn_click(id){
	
	//alert("跳转到第"+id+"页面");
	currentPage = id;
	  getAllUser();
}

//批量操作
function fn_del_user(){
	if(delId==""&&flag == 0){  /*没有选中  */
		alert("空,您还未选中要删除的用户");
	}else{
		 //alert("您选中了"+delIds);
		 $.ajax({
			url:"UserOperationServlet",
			type:"POST",
			data:{"type":"delall","delId":delId,"flag":flag,"delIds":delIds},
			dataType:"json",
			success:function(data){
				getAllUser();
				 delId="";
				 delIds="";
				 currentPage=1;
					flag = 0;
					document.getElementById('check_allUser').checked=false;
			},
			error:function(){
				alert("批量删除失败！");
			}
		}); 
	}	
}

//全选,反选
$("#check_allUser").click(function(){
	if(flag==0){
		//alert("xxx")
		$("#user_tables input[type='checkbox']").prop("checked",true);
		flag=1;
	}else{
		//alert("yyy")
		$("#user_tables input[type='checkbox']").prop("checked",false);
		flag=0;
	}
	//alert(delId);
});


//选中单个或者多个的时候
function fn_check(id){

	// alert($("#check_item_"+id).val());
	 if($("#check_item_"+id).val()==0){
		//alert("开始选中")
		delId+="+"+id;
		$("#check_item_"+id).val(1);  //改变值
	}else{
		//alert("取消选中")
		delId=delId.replace("+"+id,"");
		$("#check_item_"+id).val(0);  //改变值
	} 
} 

//添加用户信息
function fn_add_user(){
	//清除表格、样式数据 

	//弹出模态框
	$('#userAddModal').modal({
		backdrop:"static"		
	});
	
	
}

//删除一个用户信息
function fn_removeUser(id){
	var type = "delete";
	$.ajax({
		url:"UserOperationServlet",
		type:"POST",
		data:{"type":type,"user_code":id},
		dataType:"json",
		success:function(data){
			getAllUser();
		},
		error:function(){
			alert("操作失败！！");
		}
		
	});	
}




//编辑用户信息
function fn_updata_user(){
	//发送ajax，更新用户信息
 
	
	 $("#type").val("update");
	 $.ajax({
		url:"UserOperationServlet",
		type:"POST",
		data:$("#userUpdateModal form").serialize(),
		dataType:"json",
		success:function(data){
			$("#userUpdateModal").modal('hide');
			getAllUser();
		},
		error:function(){
			alert("失败！");
		}
	 });
}

//根据id获取指定用户
function fn_getUser(id){
   // alert(id);
	 //$("#type").val("edit");
	 var type="edit";
	 $.ajax({
		url:"UserOperationServlet",
		type:"POST",
		data:{"type":type,"user_code":id},
		dataType:"json",
		success:function(data){
			 $("#user_codes").val(data.id);
			 $("#user_names").val(data.username);
			 $("#user_ages").val(data.age);
			 $("#user_addresss").val(data.addr);
			 $("#user_emails").val(data.email);
			 $("#user_avats").val(data.avat);
			//显示
			$('#userUpdateModal').modal({
				backdrop:"static"		
			});
		},
		error:function(){
			alert("失败！");
		}
	 });
}



//模态框一个用户信息
function fn_user_add(){
	
	//$("#userAddress").val(address);
	//1.校验数据
	//2. 发送ajax请求
 	$.ajax({
		url:"UserOperationServlet",
		type:"POST",
	    dataType:"json",
	    
		data:$("#userAddModal form").serialize(),
		success:function(data){
			$("#userAddModal").modal('hide');
			fn_remove_data();
			getAllUser();
		},
		error:function(data){
			alert("error!")
		}
		
	});   
	 
 }
 
 //清空表单的样式---------未使用
function reset_form(ele) {
	$(ele)[0].reset();
	//清空表单样式
	$(ele).find("*").removeClass("has-success has-error");
	$(ele).find(".help-block").text("");
}
	
 
 function fn_remove_data(){
	 $("#user_code").val("");
	 $("#user_name").val("");
	 $("#user_age").val("");
	 $("#user_address").val("");
	 $("#user_email").val("");
	 $("#user_avat").val("");
 }
function fn_user_cancel(){
	$("#userAddModal").modal('hide');
	
};

function getAllUser(){
	var type="select";
	$.ajax({
		url:'UserOperationServlet',
		type:'post',
		data:{"type":type},
		dataType:'json',
		success:function(data){
			//alert(data);
			var htmlstr="";
			
			totalCount = data.length;
			//alert(totalCount);
			size = totalCount/5;
			if(size*5!= totalCount){
				size = size+1;
			}
			
			startPage = (currentPage-1)*5;
			if(startPage+5<=totalCount){
				endPage = startPage+5;
			}
			
			if(startPage+5 >totalCount){
				endPage = totalCount;
				//alert(endPage);
			}
			delIds = "";
			 for(var i=0;i<data.length;i++){
				
				 if(i>=startPage && i<endPage){
					 
						var user = data[i];
						var item = "check_item_"+user.id;
						var str = 
						"<tr><th><input type='checkbox' id='"+item+"' value='0' onclick='fn_check("+user.id+")'/>"
						+user.id
						+"</th><th>"+user.username
						+"</th><th>"+user.age
						+"</th><th>"+user.gender
						+"</th><th>"+user.email
						+"</th><th>"+user.addr
						+"</th><th>"+user.avat
						+"</th><th><button type='button' class='btn btn-info' id='user_edit' onclick='fn_getUser("+user.id+")'>编辑</button>"
						+"<button type='button' class='btn btn-danger' id='user_del' onclick='fn_removeUser("+user.id+")' >删除</button>"
						+"</th></tr>"
					
						htmlstr+=str; 
						delIds+="+"+user.id;
				 }
			}
			$("tbody").html(htmlstr); 
			//处理分页：
			
			var ulstr =  "<li><a href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
			for(var i=1;i<size+1;i++){
				var str;
				if(i==currentPage){
					str = "<li class='active'><a href='#' onclick='#'>"+i+"</a></li>";
				}else{
					str =  "<li><a href='#' onclick='fn_click("+i+")'>"+i+"</a></li>";	
				}
					
				ulstr+=str;
			}
			ulstr+= "<li><a href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>";
			if(data.length>0){
			   $("ul").html(ulstr);
			}
		    if(data.length<=0){
				document.getElementById('page').style.display = "none";
			} 
		},
		error:function(){
			alert('服务器执行错误！');
		}
	});
	
	
}



</script>

</body>
</html>